<template>
  <span class="node-name-title">
    <span v-if="!isInput" @click.stop="clickEvent()">{{ value }}</span>
    <el-input v-if="isInput" type="text" @blur="blurEvent()" @focus="$event.currentTarget.select()"
              v-model:value="value" :style="{ width: width }"/>
  </span>
</template>
<script setup name="EditName">
import {
  ref, defineProps, defineEmits, toRefs
} from "vue";

const isInput = ref(false);
const emit = defineEmits(["input", "edit"])
const props = defineProps({
  value: {
    type: String,
    required: false,
  },
  width: {
    type: String,
    required: false,
    default: '85%',
  },
})
const {value, width} = toRefs(props);
const clickEvent = (index) => {
  isInput.value = true;
  emit('edit', false);
}
const blurEvent = (index) => {
  isInput.value = false;
  emit('input', value);
  emit('edit', true);
}

// export default {
//   name: 'EditName',
//   mixins: [flowMixin],
//   props: {
//     value: {
//       type: String,
//       required: false,
//     },
//     width: {
//       type: String,
//       required: false,
//       default: '85%',
//     },
//   },
//   data() {
//     return { isInput: false };
//   },
//   methods: {
//     clickEvent(index) {
//       this.isInput = true;
//       this.$emit('edit', false);
//     },
//     blurEvent(index) {
//       this.isInput = false;
//       this.$emit('input', this.value);
//       this.$emit('edit', true);
//     },
//   },
//};
</script>

<script>
import {flowMixin} from '../mixins/flowMixin';

export default {
  mixins: [flowMixin]
}
</script>
